<template>
    <view class="p30" v-if="isLoad">
        <view class="tc noD" v-if="list.length==0">暂无数据</view>
        <view class="item rel" v-for="i,j of list">
            <view>客户姓氏: {{i.name}}{{i.sex===0?'先生':'女士'}}</view>
            <view class="fhc" @click="call(i.phone+'')">联系电话: {{i.phone}}
                <image src="/static/images/icon_phone.png" mode="widthFix" class="tel"></image>
            </view>
            <view>兴趣板块: {{['融资服务','财税管理','会记审计','企业资质','法律咨询'][i.model]}}</view>
            <view v-if="i.model==0">融资金额 :{{i.acount}}</view>
            <view class="abs fenpeiBtn" v-if="1==i.userId&& ['董事长','总经理'].includes(role)" @click="setStaff(1,i)">
                分配业务员</view>
        </view>

        <u-picker :show="showStaff" :columns="staff" keyName="name" @cancel="showStaff = false" @confirm="selectStaff"></u-picker>
    </view>
</template>
<!-- role==''||role=='' -->

<script>
    import api from '@/api/api.js';
    export default {
        data() {
            return {
                role: '',
                list: [],
                page: 1,
                isLoad: 0,
                item: '',
                staff: '', //员工列表
                active_staff: '', //选中的员工
                showStaff: false, //显示员工列表
            };
        },
        onLoad() {
            this.role = this.getS('role')
            this.getD(1)
        },
        onReachBottom: () => {
            this.getD()
        },
        methods: {
            call(tel) {
                uni.makePhoneCall({
                    phoneNumber: tel
                })
            },
            async setStaff(type, i) { //分配员工 1 业务 2贷后 3执行
                this.item = i
                //获取员工列表
                if (!this.staff) {
                    let staff = await api.getSalesUsers();
                    this.staff = [
                        staff.userList.map(i => {
                            return {
                                id: i.userId,
                                name: i.nickName //userName
                            }
                        })
                    ]
                }
                this.showStaff = true
            },
            async selectStaff(e) {
                console.log(e);
                let userId = e.value[0].id
                let data = {
                    id: this.item.id,
                    userId
                }
                let res = await api.changeOutUser(data)


                console.log(666, res);
                if (res.code == 200) {
                    //分配接口
                    this.showStaff = false
                    this.staff = ''
                    this.active_staff = ''
                    this.item.userId = userId
                    this.toast(`分配成功`)
                } else {
                    this.toast(res.msg)
                }
            },
            getD(reset) {
                if (reset) {
                    this.page = 1
                    this.list = []
                }
                if (this.page < 1) return
                api.myOutCustomer({ page: this.page }).then(r => {
                    if (r.code == 200) {
                        this.list = [...this.list, ...r.data.list]
                        if (r.data.list.length) {
                            this.page++
                        } else {
                            this.list = [ //
                                //{ acount: 900, id: 3, isInvice: 1, model: 4, name: "成",phone: "18111111112", sex: 0, userId: 1, },
                            ]
                            this.page = -1
                        }
                    } else {
                        this.page = -1
                    }
                    this.isLoad = 1
                })
            }
        }
    }
</script>

<style lang="scss">
    .item {
        padding: 20rpx;
        background-color: #fff;
        border-radius: 16rpx;
        margin-bottom: 24rpx;
    }

    .fenpeiBtn {
        padding: 8rpx 12rpx;
        border-radius: 6rpx;
        color: #fff;
        background-color: #39b54a;
        bottom: 20rpx;
        right: 20rpx;
    }

    .tel {
        width: 40rpx;
        margin-left: 16rpx;
    }
</style>